<template>
  <div class="">
    <a-modal
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :modal-style="modalStyle"
      :body-style="bodyStyle"
      :mask-closable="false"
      @cancel="dialogCancel"
      @before-ok="dialogBeforeOk"
    >
      <a-form ref="formRef" :model="formModel" :rules="rules">
        <a-form-item
          field="password"
          label="旧密码"
          label-col-flex="80px"
          required
          :validate-trigger="['change','input']"
        >
          <a-input-password v-model="formModel.password" placeholder="请输入旧密码" autocomplete="off" allow-clear style="width: 80%"/>
        </a-form-item>
        <a-form-item
          field="new_password"
          label="新密码"
          label-col-flex="80px"
          required
          :validate-trigger="['change','input']"
        >
          <a-input-password v-model="formModel.new_password" placeholder="请输入新密码" autocomplete="off" allow-clear style="width: 80%"/>
        </a-form-item>
        <a-form-item
          field="confirm_password"
          label="确认密码"
          label-col-flex="80px"
          required
          :validate-trigger="['change','input']"
        >
          <a-input-password v-model="formModel.confirm_password" placeholder="请再次输入新密码" autocomplete="off" allow-clear style="width: 80%"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  import { apiResetPwd } from '@/api/admin';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    id: {
      type: [Number, String],
      default: '',
    },
  });

  const baseFormModel = {
    password: '',
    new_password: '',
    confirm_password: '',
  };
  const formRef = ref();
  const formModel = ref(baseFormModel);
  const modalStyle = {
    width: '400px',
    height: '320px',
  };
  const bodyStyle = {
    height: 'calc(100% - 108px)',
    overflow: 'auto',
  };

  const dialogVisible = ref(false);
  const dialogTitle = ref();

  const checkPwd = (value, callback) => {
    if (value === '') {
      callback(new Error('请再次输入密码'));
    } else if (value !== formModel.value.new_password) {
      callback(new Error('两次输入密码不一致!'));
    } else {
      callback();
    }
  }
  const rules = {
    password: [
      {required: true, message: '旧密码不能为空'},
    ],
    new_password: [
      {required: true, message: '新密码不能为空'},
      // {match: /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/, message: '密码应至少包含数字、大写、小写等3个字符'},
      {minLength: 6, message: '密码长度应为6~12位字符'},
      {maxLength: 12, message: '密码长度应为6~12位字符'},
    ],
    confirm_password: [
      {required: true, message: '确认密码不能为空'},
      {validator: checkPwd},
    ],
  };

  // 表单重置
  const reset = async () => {
    formModel.value = baseFormModel;
    await formRef.value?.resetFields();
  };
  const fetchData = async (row) => {
    dialogVisible.value = true;
    dialogTitle.value = '重置密码';

    await reset();
    if (row) {
      formModel.value = row;
      formModel.value.password = '';
    }
  };
  // 提交
  const submit = async (done) => {
    try {
      const ruleRes = await formRef.value?.validate();
      if (!ruleRes) {
        await apiResetPwd(formModel.value);
        done();
      } else {
        done(false);
      }
    } catch (err) {
      done(false);
    } finally {
      done(false);
    }
  };

  const dialogCancel = () => {
    dialogVisible.value = false;
  };
  const dialogBeforeOk = (done) => {
    submit(done);
  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
  });
</script>

<style scoped lang="less">

</style>
